---
id: circular-progress
title: Progress - Circular
description: An element that shows either determinate or indeterminate progress.
---

<ComponentPreview id="ProgressCircular" />

## Anatomy

To set up the progress correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="circular-progress" />

## Examples

Learn how to use the `Progress` component in your project. Let's take a look at the most basic example:

<Example id="basic" />

### Set a min and max value

By default, the maximum is `100`. If that's not what you want, you can easily specify a different bound by changing the
value of the `max` prop. You can do the same with the minimum value by setting the `min` prop.

For example, to show the user a progress from `10` to `30`, you can use:

<Example id="min-max" />

### Indeterminate value

The progress component is determinate by default, with the value and max set to 50 and 100 respectively. To render an
indeterminate progress, you will have to set the `value` to `null`.

<Example id="indeterminate" />

### Showing a value text

Progress bars can only be interpreted by sighted users. To include a text description to support assistive technologies
like screen readers, use the `value` part in `translations`.

<Example id="value-text" />

### Using the Root Provider

The `RootProvider` component provides a context for the progress. It accepts the value of the `useProgress` hook. You
can leverage it to access the component state and methods from outside the progress.

<Example id="root-provider" />

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

## API Reference

<ComponentTypes id="progress" />

## Accessibility

Complies with the [the progressbar role requirements.](https://w3c.github.io/aria/#progressbar).
